 <!--
 	<el-form :model="permissionInfo" :rules="rules" ref="permissionInfo">
 	:model="permissionInfo"  绑定这个对象，表示校验这个对象里的属性
 	
 	<el-form-item prop="permissionName"></el-form-item>
 -->

<template>
	 <el-dialog
	    title="新增权限"
	    :visible.sync="showAddNew"
	    width="30%"
	    :before-close="handleClose">
	    <el-form :model="permissionInfo" :rules="rules" ref="permissionInfo">
	    	<table>
	    		<tr>
	    			<td class="title">权限名称</td>
	    			<td class="content">
	    				<el-form-item prop="permissionName">
	    					<el-input v-model="permissionInfo.permissionName"></el-input>
	    				</el-form-item>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="title">父级权限</td>
	    			<td class="content">
	    				{{parentDesc}}
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="title">权限描述</td>
	    			<td class="content">
	    				<el-form-item prop="permissionDesc">
	    					<el-input v-model="permissionInfo.permissionDesc"></el-input>
	    				</el-form-item>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="title">排列序号</td>
	    			<td class="content">
	    				<el-form-item prop="sortNum">
	    					<el-input v-model="permissionInfo.sortNum"></el-input>
	    				</el-form-item>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="title">权限等级</td>
	    			<td class="content">
	    					<el-select v-model="permissionInfo.permissionLeve" placeholder="请选择">
	    						<el-option v-for="item in 5"
	    							:key="item"
	    							:label="item"
	    							:value="item">
	    							
	    						</el-option>
	    					</el-select>
	    			</td>
	    		</tr>
	    	</table>
	    	</el-form>
	    	<span slot="footer" class="dialog-footer">
	    		<el-button @click="handleClose">取消</el-button>
	    		<el-button @click="addOne" type="primary">确定</el-button>
	    	</span>
	    </el-dialog>
</template>
<script >
export default{
	//子组件要拿到父组件的showAddNew,要用props属性传递
	props:['showAddNew','parentDesc','parentid'],
	data(){
		//自定义验证规则
			var checkNum=(rule,value,callBack)=>{
				//非0-9
				var re=/[^0-9]/ig;
				//如果为true,返回错误提示
				if(re.test(value)){
					console.log(re.test());
					return callBack(new Error('请输入正确数字'));
				}
				callBack();
			}
		return{
			permissionInfo:{},  //接收新增的权限信息,对象用于判断它是否已输入，校验
			//利用form表单绑定属性
			 rules: {
                permissionName: [
                    {required: true,message:'请输入权限名称',trigger:'blur'},
                    {min:2,message:'名称最少两个字符',trigger:'blur'}
                ],
                permissionDesc: [
                    {required: true,message: '请输入权限描述',trigger:'blur'},
                    {min:4,message:'描述不能少于4个字',trigger:'blur'}
                ],
                sortNum: [
                    {required:true,message:'请输入排序号',trigger:'blur'},
                    //validator自定义的验证规则
                    {validator:checkNum,trigger:'blur'}
                ]
               }
           }
		 },
           methods:{
           	//因为点击触发一次弹窗弹出后,父组件的showAddNew的值变为true，再点击取消或确定时子组件的
           	//	showAddNew值就会变为false而隐藏,父组件的新增按钮就只能触发一次
           	//所以要点击取消的同时改变父组件的showAddNew值，实现反复点击触发
	           	handleClose(){
	           		this.$parent.showAddNew=false;
	           	},
	           	addOne(){
	           			this.$refs['permissionInfo'].validate((valid)=>{
	           			if(valid){
	           				//将父级的id作为新增权限的父级id,父级id就是0
	           				this.permissionInfo.parentid=this.parentid;
	           				//提交
	           				this.$http.post(this.$apis.addNewPermission,this.permissionInfo)
	           				.then((resp)=>{
//	           					console.log(resp);
	           				})
	           				this.$parent.showAddNew=false;
	           			}
	           			else{
	           				console.log('请正确输入内容');
	           				return false;
	           			}
	           		})
		}
	}
}
</script>
<style lang="scss" scoped>
	.title{
		width: 30%;
		text-align: center;
		line-height: 38px;
	
	}
	.content{
		width: 70%;
	}
</style>